<template>
  <div class="page6" v-loading="loading">
    <div style="padding-left: 70px">
      <div class="top-chart">
        <div class="tips-dialog">
          <!-- <div>存存量客户收入保有率<span>{{cclObj.value1}}%</span>，较上年提升<span>{{cclObj.value2}}PP</span></div> -->
          <!-- <div>存增量客户收入保有率<span>{{czlObj.value1}}%</span>，较上年提升<span>{{czlObj.value2}}PP</span></div> -->
          <div>{{ cclText }}</div>
          <div>{{ czlText }}</div>
        </div>
        <BarChart :chartData="cclData" class="chart"></BarChart>
      </div>      
    </div>
    <div class="page6-table">
      <div class="table-label">
        <div>存存量客户收入保有率提升(PP)</div>
        <div>排名</div>
      </div>
      <el-table :data="cclPPData" :header-cell-style="headerCellStyle" border ref="table">
        <el-table-column 
          v-for="(item, i) in cclPPColumns" 
          :key="i" 
          :prop="item.prop" 
          :label="item.label" 
          align="center"
          min-width="50"
          style="width: 100%" 
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="page6-table">
      <div class="table-label">
        <div>存增量客户收入保有率(%)</div>
        <div>排名</div>
      </div>
      <el-table :data="czlData" :header-cell-style="headerCellStyle" border>
        <el-table-column 
          v-for="(item, i) in czlColumns" 
          :key="i" 
          :prop="item.prop" 
          :label="item.label" 
          align="center"
          min-width="50"
          style="width: 100%" 
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  components: {
    BarChart: () => import("./charts/page6Chart.vue")
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    return {
      loading: false,
      cclData: [[], []],
      cclText: "",

      cclPPData: [],
      cclPPColumns: [],

      czlData: [],
      czlColumns: [],
      czlText: "",

      headerCellStyle: {
        fontSize: `12px`,
        fontWeight: '600',
        color: '#000',
        height: '25px',
        padding: '0'
      },
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPageSix(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { ccl, cclPP, czl, cclText, czlText } = res.content;
            this.cclData = [[], []];
            ccl.sort((a, b) => b.indexValue - a.indexValue).forEach(it => {
              this.cclData[0].push(it.displayName);
              this.cclData[1].push(it.indexValue);
            })

            this.cclPPData = [];
            let obj1 = {}, obj2 = {};
            this.cclPPColumns = cclPP.map((it, i) => {
              obj1[`value${i+1}`] = it.indexValue;
              obj2[`value${i+1}`] = it.sort;
              return {
                prop: "value" + (i + 1),
                label: it.displayName
              }
            });
            this.cclPPData.push(obj1, obj2);

            this.czlData = [];
            obj1 = {}, obj2 = {};
            this.czlColumns = czl.map((it, i) => {
              obj1[`value${i+1}`] = it.indexValue;
              obj2[`value${i+1}`] = it.sort;
              return {
                prop: "value" + (i + 1),
                label: it.displayName
              }
            });
            this.czlData.push(obj1, obj2);

            this.cclText = cclText;
            this.czlText = czlText;
          }
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        },
        err => { this.loading = false; }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.page6 {
  padding: 26px 10px 10px 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .top-chart {
    width: 100%;
    height: 340px;
    border: 1px solid #dee5f3;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    .tips-dialog {
      position: absolute;
      top: -28px;
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
      padding: 5px 10px;
      border: 1px solid #dee5f3;
      background-color: #fff;
      > div {
        font-weight: 600;
        font-size: 16px;
        text-align: center;
        &:first-child {
          font-size: 18px;
        }
        span {
          color: red;
        }
      }
    }
    .chart {
      height: 280px; 
      width: 100%;
      margin-top: 50px;
    }
  }
  .page6-table {
    display: flex;
    margin-top: 20px;
    .table-label {
      width: 90px;
      padding-top: 23px;
      text-align: center;
      > div:first-child {
        font-weight: 600;
        margin-bottom: 5px;
      }
    }
  }
}
/deep/ .el-table {
  .el-table__row {
    td {
      padding: 0 !important;
    }
    .cell {
      padding: 2px 0 !important;
      font-size: 12px !important;
    }
  }
}
</style>